<!DOCTYPE html>
<html>
<head>
  <style>
    #myDiv {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      var radius = 100; // 圆的半径
      var angle = 0; // 初始角度

      // 定义动画函数，用于计算每一帧的位置和角度
      function animateDiv() {
        var x = radius * Math.cos(angle); // 计算x坐标
        var y = radius * Math.sin(angle); // 计算y坐标

        // 使用animate()函数改变<div>元素的位置
        $("#myDiv").animate({
          right: x + "px",
          top: y + "px"
        }, 1000); // 100是动画持续时间（毫秒）

        angle += 0.1; // 增加角度以便产生旋转效果
        requestAnimationFrame(animateDiv); // 递归调用自身以实现连续动画效果
      }

      animateDiv(); // 启动动画
    });
  </script>
</body>
</html>